<template>
	<div id="mobile-analysis">
    <p class="page-header font16 bg-color-white">移动分析</p>
    <div class="box">
      <!-- 指标概览 -->
      <div class="indicatorOverview">
        <el-card class="box-card">
          <el-row>
            <p>指标概览</p>
            <el-col :span="4">
              <el-card>
                <div>
                  <p>截止时间</p>
                  <p class="dataTime">{{ nowTime }}</p>
                </div>
              </el-card>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="4">
              <el-card>
                <div>
                  <p>设备报活</p>
                  <p class="data">{{this.device_active}}</p>
                </div>
              </el-card>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="4">
              <el-card>
                <div>
                  <p>活跃用户</p>
                  <p class="data">{{this.user_active}}</p>
                </div>
              </el-card>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="4">
              <el-card>
                <div>
                  <p>新增用户</p>
                  <p class="data">{{this.user_new}}</p>
                </div>
              </el-card>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="4">
              <el-card>
                <div>
                  <p>总用户数</p>
                  <p class="data">{{this.user_total}}</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="label">时间查询</span>
            <el-select v-model="timeVal" class="width160" placeholder="请选择时间" size="mini" @change="changeTimeSearch">
              <el-option
                v-for="item in timeList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <v-echarts :legendData="legendData" :xAxisData="xAxisData" :seriesData="seriesData" echartsType="bar"></v-echarts>
        </el-card>
      </div>
      <!-- 启动速度 -->
      <div class="indicatorOverview" >
         <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="label">启动速度</span>
          </div>
          <line-Simple :xAxisData="lineDate" :seriesData="lineData"></line-Simple>
         </el-card>
      </div>
      <!-- 渠道用户数 -->
      <div class="startupSpeed-hotPage">
        <el-row :gutter="10">
          <el-col :span="16">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                渠道用户数
              </div>
              <pie-chart :legendData="channelUserName" :seriesData="channelUserList" :type="1" :height="296"></pie-chart>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                Hot页面
              </div>
              <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                  type="index"
                  :index="indexMethod"
                  label="排名">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="路径名称">
                </el-table-column>
                <el-table-column
                  prop="uv"
                  label="UV"
                  width="50">
                </el-table-column>
                <el-table-column
                  prop="pv"
                  label="PV"
                  width="50">
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!-- 留存分析和设备情况 -->
      <div class="retentionAnalysis-device-version">
        <el-row :gutter="10">
          <el-col :span="16">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                留存分析
              </div>
              <!-- 显示table列表 -->
              <div>
                <el-table
                  :data="tableDataValue"
                  border
                  style="width: 100%">
                  <el-table-column
                    v-for="item in header_7th"
                    :key="item.key"
                    :align="item.text_align"
                    :prop="item.key"
                    :label="item.label">
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                设备情况
              </div>
              <pie-chart :legendData="devsName" :seriesData="devsData"></pie-chart>
            </el-card>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                版本情况
              </div>
              <pie-chart :legendData="versName" :seriesData="versData"></pie-chart>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 地图插件 -->
      <div class="retentionAnalysis-device-version">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                地图插件
              </div>
              <div>
                <map-chart  v-if="mapData.length > 0" :mapDatas="mapData"></map-chart>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import api from '../../../api/url'
  import ajax from '../../../api/ajax/ajax'
  import { getDateTime } from '../../../assets/js/index.js'
  import VEcharts from './csEcharts'
  import pieChart from './pie.vue'
  import mapChart from './map.vue'
  import lineSimple from './lineSimple.vue'
	export default {
    name: 'mobile-analysis',
    components: {
      VEcharts,
      pieChart,
      mapChart,
      lineSimple
    },
    data () {
      return {
        lineDate: [],
        lineData: [],
        channelUserName: [], // 渠道用户数名称
        channelUserList: [], // 渠道用户数数据
        mapData: [], // 地图
        versName: [], // 版本名称
        versData: [], // 版本数据
        devsName: [], // 设备名称
        devsData: [], // 设备数据
        tableDate: '', // 表格时间
        tableDataValue: [], // 表格数据
        header_7th: [
          {
            text_align: '',
            key: 'group_colume',
            label: '时间'
          },
          {
            text_align: 'center',
            key: 'total_counts',
            label: '初始用户人数'
          },
          {
            text_align: 'center',
            key: 'day1',
            label: '首日'
          },
          {
            text_align: 'center',
            key: 'day2',
            label: '次日'
          },
          {
            text_align: 'center',
            key: 'day3',
            label: '2天后'
          },
          {
            text_align: 'center',
            key: 'day4',
            label: '3天后'
          },
          {
            text_align: 'center',
            key: 'day5',
            label: '4天后'
          },
          {
            text_align: 'center',
            key: 'day6',
            label: '5天后'
          },
          {
            text_align: 'center',
            key: 'day7',
            label: '6天后'
          }
        ],
        user_active: '0',
        device_active: '0',
        user_total: '0',
        user_new: '0',
        appValue: 'appA', // 查询的项目
        appList: [ // 项目列表
          {
            label: '项目A',
            value: 'appA'
          },
          {
            label: '项目B',
            value: 'appB'
          }
        ],
        nowTime: '', // 截至当前时间
        timeVal: '1', // 查询时间 默认是最近7天
        timeList: [ // 查询时间列表
          {
            label: '今日',
            value: '3'
          },
          {
            label: '最近7天',
            value: '1'
          }
        ],
        legendData: [], // echarts图，头部数据
        xAxisData: [], // echarts图，横坐标数据
        seriesData: [ // 二charts图数据

        ],
        tableData: [] // Hot排行榜数据
      }
    },
    computed: {},
    methods: {
      // 时间查询切换
      changeTimeSearch () {
        this.timeSearch(this.timeVal)
      },
      indexMethod (index) {
        return index + 1
      },
      // 时间查询
      timeSearch (timeval) {
        ajax.post(api.LIST_INDEX_FORCHART, {date_type: timeval}).then((res) => {
          let dataArr = []
          res.data.forEach((item, index) => {
            if (item.name !== '时间') {
              var obj = {}
              obj.data = []
              obj.name = item.name
              obj.type = 'bar'
              obj.barWidth = 25
              obj.data = item.count
              this.legendData.push(item.name)
            } else {
              this.xAxisData = item.count
            }
            dataArr.push(obj)
          })
          this.seriesData = dataArr.slice(0, dataArr.length - 1)
        })
      },
      // 指标概览
      indexOverview () {
        ajax.post(api.LIST_INDEX).then((res) => {
          this.user_active = res.data.user_active
          this.device_active = res.data.device_active
          this.user_total = res.data.user_total
          this.user_new = res.data.user_new
        })
      },
      // 留存分析表格和图形
      retentionAnalysis () {
        ajax.post(api.LIST_INDEX_FORTABLE_AND_CHART).then((res) => {
          // rows 表格
          this.tableDataValue = res.data.rows
          this.tableDate = res.data.rows.length
          // 设备 devs 饼图 versName
          res.data.devs.forEach(item => {
            this.devsName.push(item.name)
            let obj = {}
            obj.value = item.count
            obj.name = item.name
            this.devsData.push(obj)
          })
          // 版本 vers 饼图
          res.data.vers.forEach(item => {
            this.versName.push(item.name)
            let obj = {}
            obj.value = item.count
            obj.name = item.name
            this.versData.push(obj)
          })
        })
      },
      // 地图
      mapChartMain () {
        ajax.post(api.LIST_USERFOR_PROVINCE).then((res) => {
          this.mapData = res.data
        })
      },
      // 排行榜和渠道用户数
      listHotMain () {
        ajax.post(api.LISTHOT_PAGERANK).then((res) => {
          this.tableData = res.data.hot_page_list
          res.data.channel_user_list.forEach(item => {
            this.channelUserName.push(item.name)
            let obj = {}
            obj.value = item.count
            obj.name = item.name
            this.channelUserList.push(obj)
          })
        })
      },
      // 启动速度
      startingSpeed () {
         ajax.post(api.LISTAPPSTART_FORCHART).then((res) => {
           this.lineDate = res.data.date
           this.lineData = res.data.data
        })
      }
    },
    mounted () {
      this.mapChartMain() // 地图
    },
    created () {
      this.nowTime = getDateTime(new Date(), 'ss') // 当前时间
      this.indexOverview() // 指标概览
      this.timeSearch(this.timeVal) // 时间查询
      this.retentionAnalysis() // 留存分析表格和图形
      this.listHotMain() // 排行榜和渠道用户数
      this.startingSpeed() // 启动速度
    }
	}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #mobile-analysis
    height 100%
    .page-header
      height 50px
      line-height 50px
      padding-left 20px
      font-weight bold
      position relative
      z-index 99
      border-bottom 1px solid #d8dce5
    .box
      height calc(100% - 51px)
      padding 10px
      overflow-y scroll
      .box-card
        margin-bottom 10px
        .label
          margin-right 20px
        .el-row
          & > p
            margin-bottom 10px
          .el-col
            margin-top 1px
            div
              height 110px
            p
              text-align center
              color #888
              font-size 12px
            .data
              font-size 22px
              color #666
              font-weight bold
              margin-top 16px
            .dataTime
              font-size 16px
              color #666
              font-weight bold
              margin-top 10px
        .v-echarts
          & > div, .echarts, canvas
            width 100% !important
        .table-rows
          border: 1px solid #D8DCE5
          border-collapse collapse
          text-align center
          color #5A5E66
          margin 20px 0
          th
            font-weight normal
            border-left 1px solid #D8DCE5
            border-top 1px solid #D8DCE5
            height 44px
            font-size 14px
            background-color #f4f4f5
          td
            border-left 1px solid #D8DCE5
            border-top 1px solid #D8DCE5
            height 42px
            padding 0 20px
            font-size 12px
</style>
